<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <title></title>
    <style type="text/css">
        html, body {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            background: #f8f8f8;
        }

        .shopName {
            width: 80%;
            margin: 8vw 0;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .shopName img {
            width: 16vw;
            height: 16vw;
            margin-right: 3.2vw;
        }

        .shopName > div > div:nth-child(1) {
            font-weight: bold;
            font-size: 4.8vw;
            margin-bottom: 3.2vw;
            color: #FF0000;
        }

        .shopName > div > div:nth-child(2) {
            font-size: 3.6vw;
            color: #999999;
        }

        .ipt {
            width: 80%;
            height: 11vw;
            line-height: 11vw;
            border: none;
            text-indent: 2vw;
            border-radius: 1vw;
        }

        .ipt:focus {
            outline: none;
        }

        .hyqIpt {
            margin-top: 5vw;
            width: 82%;
            height: 10vw;
            line-height: 10vw;
            border: 1px solid #F2F2F2;
            border-radius: 1vw;
            text-indent: 2vw;
            color: #999999;
            font-size: 3.6vw;
        }

        .jbIpt {
            margin-top: 5vw;
            width: 82%;
            height: 10vw;
            line-height: 10vw;
            border-radius: 1vw;
            text-indent: 2vw;
            color: #999999;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            font-size: 3.6vw;
        }

        .jbIpt > div:nth-child(1) {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .scrollContent {
            width: 100%;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.3);
        }

        .scrollDiv {
            width: 100%;
            height: 100vw;
            background: white;
            position: absolute;
            bottom: 0;
            border-radius: 2vw 2vw 0 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .scrollTit {
            color: #FF0000;
            padding: 3.6vw 0;
        }

        .scrollul {
            flex: 1;
            width: 100%;
            overflow: scroll;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .scrollList {
            width: 88%;
            padding: 3.6vw 2.8vw;
            border-radius: 1.5vw;
            display: flex;
            flex-direction: row;
            align-items: center;
            background: #FF0000;
            color: white;
            margin-bottom: 2vw;
        }

        .scrollList > div:nth-child(1) {
            font-size: 6vw;
            margin-right: 2vw;
        }

        .scrollList > div:nth-child(2) {
            font-size: 3.2vw;
        }

        .scrollBtn {
            width: 80%;
            height: 10vw;
            line-height: 10vw;
            background: #FF0000;
            color: white;
            text-align: center;
            border-radius: 50vw;
            font-size: 4vw;
            margin: 2vw 0;
        }

        .btn {
            background: #FF0000;
            color: white;
            width: 80%;
            text-align: center;
            padding: 2.6vw 0;
            font-size: 3.6vw;
            border-radius: 50vw;
            margin-top: 10vw;
        }
    </style>
</head>
<body>
<div class="shopName">
    <input type="hidden" id="merchantId" th:value="${merchant.id}">
    <img th:src="${merchant.logo}">
    <div>
        <div th:text="${merchant.merchantName}" style="color: #999"></div>
        <div th:text="${merchant.address}"></div>
    </div>
</div>
<input id="money" class="ipt" type="number" placeholder="消费金额"/>
<div class="hyqIpt">请选择优惠券</div>
<div class="jbIpt">
    <div>使用金币抵扣<input type="checkbox" name="money" id="useGold"/></div>
    <div>可用金币：<span id="goldNum" th:text="${member} ne null ? ${member.goldNum} : 0"></span></div>
</div>
<div class="btn" onclick="pay()">支 付</div>
<div class="scrollContent">
    <div class="scrollDiv">
        <div class="scrollTit">优惠券</div>
        <div class="scrollul">
            <div th:each="item:${coupons}" class="scrollList" th:data-txt="${item.name}" th:couponId="${item.memberCouponId}">
                <div>￥<span th:text="${item.amount * 10}"></span>折</div>
                <div>
                    <div th:text="${item.name}">满399使用</div>
                    <div>有效期至<span th:text="${#dates.format(item.expireTime,'yyyy-MM-dd HH:mm')}">2021.06.30 23:59</span></div>
                </div>
            </div>
        </div>
        <div class="scrollBtn">关闭</div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script th:src="@{/js/bignumber.js}"></script>
<script th:src="@{/js/aes1.js}"></script>
<script th:src="@{/js/jsencrypt.min.js}"></script>
<script th:src="@{/js/encryption.js}"></script>
<script th:inline="javascript">
    var token = [[${token}]];
    var memberCouponId = 0;//优惠券id
    var couponAmount = 0;//优惠券的折扣
    var price = 0;//用户输入的金额
    var useGoldNum = 0;//用户使用的金币数量
    $(function () {
        $('#money').blur(function () {
            var reg = /^\d+(\.\d{0,2})?$/;
            if ($(this).val() > 0 && !reg.test($(this).val())) {
                alert("请输入正确的金额")
                return false;
            }
            price = $(this).val();
            calculation()
        })
        var yhq = 2//优惠券如果为0，则不显示
        if (!yhq) {
            $('.hyqIpt').hide()
        }

        $('.scrollContent').hide()//隐藏优惠券列表

        $('.hyqIpt').on('click', function () {//点击显示优惠券
            $('.scrollContent').show();
        })
        $('.scrollList').on('click', function () {//点击优惠券
            memberCouponId = $(this).attr('couponId');
            couponAmount = $(this).find('span').eq(0).text();
            $('.hyqIpt').html($(this).attr('data-txt'))
            calculation();
            $('.scrollContent').hide();
        })
        $('.scrollBtn').on('click', function () {//优惠券关闭按钮
            $('.scrollContent').hide();
        })
        $('#useGold').click(function () {
            calculation();
        })
    });
    function pay() {//确认按钮
        var merchantId = $('#merchantId').val();//商户id
        var param = {
            money: price,
            memberCouponId: memberCouponId,
            useGoldNum: useGoldNum,
            merchantId:merchantId
        };
        param = JSON.stringify(param)
        var sendData = aesEncrypt(param, aesKey)//把要发送的数据转成字符串进行加密
        var encrypt = new JSEncrypt();
        encrypt.setPublicKey(publicKey);
        var encrypted = encrypt.encrypt(aesKey.toString()); // 把aesKey进行非对称加密
        var requestParam = {ciphertext: sendData, encrypted: encrypted};
        $.ajax({
            type: 'POST',
            url: '/pay/test',
            dataType: 'json',
            data: requestParam,
            headers: {
                'Authorization': token
            },
            success: function (data) {
                if (data.code == 200) {
                    if (data.data.trade.payerTotal > 0) {
                        window.location.href = data.data.payUrl
                    } else {
                        $.ajax({
                            type: 'POST',
                            url: '/api/notify/notify',
                            dataType: 'json',
                            data: {outTradeNo:data.data.trade.outTradeNo},
                            success:function (res){
                                if (res.code == 200) {
                                    window.location.href = "/checkoutCounter/paySuccess?out_trade_no="+data.data.trade.outTradeNo;
                                } else {
                                    $.toast(res.message, "cancel");
                                }
                            }
                        });
                    }
                } else {
                    $.toast(data.message, "cancel");
                }
            }
        });
    }
    // 自定义高精度浮点数运算
    // 对象格式写法
    var float_calculator = {
        add: function (arg1, arg2) {
            arg1 = new BigNumber(arg1)
            return arg1.plus(new BigNumber(arg2));
        },
        minus: function (arg1, arg2) {
            arg1 = new BigNumber(arg1)
            return arg1.minus(arg2);
        },
        mul: function (arg1, arg2) {
            arg1 = new BigNumber(arg1)
            return arg1.multipliedBy(arg2);
        },
        div: function (arg1, arg2) {
            arg1 = new BigNumber(arg1)
            return arg1.dividedBy(arg2);
        }
    };

    //计算需要支付的金额
    function calculation() {
        var money = price;
        if (money == 0 || money == undefined) {
            return false;
        }
        //选择了优惠券
        if (memberCouponId > 0 && money > 0) {
            money = float_calculator.mul(money, float_calculator.div(couponAmount, 10));
        }
        //如果使用了金币抵扣
        if ($("#useGold").prop("checked")) {
            var goldNum = $('#goldNum').text();
            money = float_calculator.minus(money, goldNum)
            if (money <= 0) {
                money = 0;
                useGoldNum = price;
            } else {
                useGoldNum = goldNum;
            }
        }
        $('#money').val(money);
    }
</script>
</body>
</html>
